<template>
    <div class="collect">
        <div class="header">
            <img src="../assets/img/刀.png" alt="">
            <h2>个人收藏</h2>
            <img src="../assets/img/勺子.png" alt="">
        </div>
        <div class="bottom"> 
            <div v-if="!isLogin" class="noLogin">登录后可查看收藏美食菜谱~~</div>
            <div class="loves" v-else>
                <div class="noLoves" v-if="arr == null">暂无收藏美食菜谱~~</div>
                <div v-for="(item,i) in arr" :key="i" class="love">
                    <div class="left">
                        <img :src="item.img" alt="">
                    </div>
                    <div class="right">
                        <div class="right_header">
                            <span>{{ item.recipe_name }}</span>
                            <button @click="remove(i)">取消收藏</button>
                        </div>
                        <p>{{ item.recipe_text }}</p>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
    export default {
        data(){
            return {
                arr: [],
                isLogin:false
            }
        },
        
        
        methods: {
            remove(value){
                localStorage.removeItem('arr');
                console.log(value);
                this.arr.splice(value, 1);
                localStorage.setItem('arr', JSON.stringify(this.arr));
            }
        },
        created(){
            let token = localStorage.getItem("AUTO_TOKEN");
            if(token){
                this.isLogin = true;
                let arr = localStorage.getItem("arr");
                arr = JSON.parse(arr);
                this.arr = arr;
                // console.log(arr);
            }
        }
    }
</script>

<style lang="less">
@import '../common/less/varible.less';
    .collect{
        width: 100%;
        font-family: cmff;
        margin-bottom: 80px;
        .header{
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            img{
                width: 50px;
            }
            h2{
                font-size: 40px;
                color: @Color;
            }
        }
        .bottom{
            .noLogin{
                text-align: center;
                margin-top: 100px;
                color: @Color;
            }
            .loves{
                margin-top: 30px;
                .noLoves{
                text-align: center;
                margin-top: 100px;
                color: @Color;
                }
                .love{
                    display: flex;
                    margin: 10px;
                    .left{
                        width: 50%;
                        img{
                            width: 100%;
                            border-radius: 10px;
                        }
                    }
                    .right{
                        width: 50%;
                        padding: 10px;
                        .right_header{
                            // display: flex;
                            span{
                                font-size: 20px;
                            }
                            button{
                                font-size: 14px;
                                background-color: @bgColor;
                                color: white;
                                border-radius: 10px;
                                height: 20px;
                                margin-left: 5px;
                            }
                        }
                        
                        p{
                            margin-top: 15px;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        
    }
</style>